/*
 * @Author: Drc
 * @Date: 2020-06-23 23:44:35
 * @LastEditors: Drc
 * @LastEditTime: 2021-10-12 10:36:22
 */
import {ThemeText} from '@path/components/ThemeComponents'
import {px2dp} from '@path/config/system'
import Theme from '@path/config/theme'
import React, {useEffect, useRef} from 'react'
import {TouchableOpacity, Text, TextStyle, ViewStyle, StyleSheet, Animated} from 'react-native'
import LinearGradient from 'react-native-linear-gradient'

type BtnTheme = 'Main' | 'Minor'

export interface ConfirmBtnProps {
  text?: string
  icon?: JSX.Element
  onPress?: Function
  style?: ViewStyle
  disabled?: boolean
  color?: string | string[]
  textStyle?: TextStyle
  enableShadow?: boolean
  btnTheme: BtnTheme
}

const TouchableOpacityAnim = Animated.createAnimatedComponent(TouchableOpacity)

const ConfirmBtn = (props: ConfirmBtnProps) => {
  const disableAnim = useRef(new Animated.Value(props.disabled ? 0 : 1))

  useEffect(() => {
    const next = props.disabled ? 0 : 1
    Animated.timing(disableAnim.current, {
      toValue: next,
      useNativeDriver: false,
      duration: 250,
    }).start()
  }, [props.disabled])

  const cacheProps = {
    Main: {
      style: {
        width: px2dp(311),
        height: px2dp(46),
        backgroundColor: Theme.getThemeColor('theme'),
        borderRadius: 54,
      },
      textStyle: {fontSize: 14, color: '#fff'},
    } as ConfirmBtnProps,
    Minor: {
      style: {
        borderWidth: 1,
        width: px2dp(311),
        height: px2dp(46),
        borderColor: Theme.getThemeColor('theme'),
        borderRadius: 54,
        backgroundColor: 'transparent',
      },
      textStyle: {fontSize: 14, color: Theme.getThemeColor('theme')},
    } as ConfirmBtnProps,
  }

  const _renderContent = (style: any = {}) => {
    return (
      <TouchableOpacityAnim
        disabled={props.disabled}
        activeOpacity={0.8}
        onPress={() => typeof props.onPress === 'function' && props.onPress()}
        style={[
          {
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'center',
            height: style.height,
            width: '100%',
            paddingHorizontal: 5,
            ...cacheProps[props.btnTheme]?.style,
            ...style,
            backgroundColor: disableAnim.current?.interpolate({
              inputRange: [0, 1],
              outputRange: [Theme.getThemeColor('text_disable'), cacheProps[props.btnTheme]?.style?.backgroundColor],
            }),
          },
          !props.enableShadow && {shadowOpacity: 0, elevation: 0},
          props.disabled && {borderWidth: 0},
          // props.disabled && {backgroundColor: Theme.getThemeColor('text_disable')},
        ]}>
        {props.icon}
        <ThemeText
          numberOfLines={2}
          style={{
            ...cacheProps[props.btnTheme]?.textStyle,
            ...props.textStyle,
            ...(props.disabled ? {color: '#8D8D8D'} : {}),
          }}>
          {props.text}
        </ThemeText>
      </TouchableOpacityAnim>
    )
  }

  return Array.isArray(props.color) ? (
    <LinearGradient
      style={{overflow: 'hidden', ...cacheProps[props.btnTheme].style, ...props.style}}
      start={{x: 0, y: 0}}
      end={{x: 1, y: 0}}
      colors={props.color}>
      {_renderContent()}
    </LinearGradient>
  ) : (
    _renderContent(props.style)
  )
}

ConfirmBtn.defaultProps = {
  btnTheme: 'Main',
}

export default ConfirmBtn
